<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>dom操作</title>
    <style>
        .red {
            color: red;
        }

        .green {
            color: green;
        }

        .blue {
            color: blue;
        }

        .underline {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <ul>
        <li>前端</li>
        <li class="red">Java</li>
        <li>Python</li>
        <li>Go</li>
        <li>C</li>
    </ul>
    <div>
        <input type="button" value="为第一个li元素添加样式" id="add">
        <input type="button" value="为第二个li元素移除样式" id="remove">
        <input type="button" value="为第三个li元素切换样式" id="toggle">
        <input type="button" value="判断第四个li元素是否包含某个样式" id="contain">
        <input type="button" value="获取第一个li元素的样式" id="get">
    </div>
    <script>
        // 为元素添加指定名称的样式
        document.querySelector("#add").onclick = function() {
            // 一次只能添加一种样式
            document.querySelector("li").classList.add("green")
            document.querySelector("li").classList.add("underline")
        }

        // 为元素移除样式
        document.querySelector("#remove").onclick = function() {
            // 一次只能移除一个
            document.querySelector("li.red").classList.remove("red")
        }

        // 切换元素的样式
        document.querySelector("#toggle").onclick = function() {
            document.querySelectorAll("li")[2].classList.toggle("blue")
        }

        // 判断元素的是否包含指定样式
        document.querySelector("#contain").onclick = function() {
            var isContains = document.querySelectorAll("li")[3].classList.contains("blue")
            console.log("元素是否包含blue样式：", isContains)
        }

        // 获取元素的第一个样式
        document.querySelector("#get").onclick = function() {
            var className = document.querySelector("li").classList.item(0)
            console.log("第一个li元素的样式：", className);
        }
    </script>
</body>
</html>